<template>
  <div class="app-container">
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <el-button
            size="small"
            style="float:right"
            type="primary"
            @click="handleSearchList()">
          查询搜索
        </el-button>
        <el-button
            size="small"
            style="float:right;margin-right: 15px"
            @click="handleResetSearch()">
          重置
        </el-button>
      </div>
      <div style="margin-top: 15px">
        <el-form v-model="listQuery" :inline="true" label-width="auto" size="small">
          <el-form-item label="项目：">
            <el-select v-model="listQuery.projectId" style="width:100%"
                       @change="projectChangeThenInitDatasourceOption();handleSearchList()"
                       @input="forceUpdateElement">
              <el-option
                  v-for="item in allProjectListOption"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="数据源：">
            <el-select v-model="listQuery.datasourceId" clearable filterable no-data-text="请先选择项目"
                       style="width:100%"
                       @change="handleSearchList">
              <el-option
                  v-for="item in datasourceOption"
                  :key="item.id"
                  :label="item.remark"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="数据表：">
            <el-input v-model="listQuery.tableName" class="input-width" clearable placeholder=""></el-input>
          </el-form-item>

        </el-form>
      </div>
    </el-card>

    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>数据列表</span>
      <el-button class="btn-add" size="mini" style="margin-left: 20px" type="warning" @click="handleAdd()">添加
      </el-button>
    </el-card>

    <div class="table-container">
      <el-table ref="roleTable"
                v-loading="listLoading"
                :data="list"
                border style="width: 100%;">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form class="demo-table-expand" inline label-position="left" style="background-color: #eeeeee4f">
              <el-form-item label="搜索条件字段">
                <span>{{ props.row.searchFields }}</span>
              </el-form-item>
              <el-form-item label="列表展示表字段">
                <span>{{ props.row.tableColumnFields }}</span>
              </el-form-item>
              <el-form-item label="新增时显示字段">
                <span>{{ props.row.addFields }}</span>
              </el-form-item>
              <el-form-item label="修改时显示字段">
                <span>{{ props.row.updateFields }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column align="center" label="项目" prop="projectId">
          <template slot-scope="scope">
            {{ (allProjectJSON[(scope.row.projectId)] || {}).name }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="数据源" prop="">
          <template slot-scope="scope">
            {{ (scope.row.projectDatasource || {}).remark }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="数据表" prop="tableName" width="230"/>
        <el-table-column align="center" label="增加按钮" prop="showAdd" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-tag v-if="scope.row.showAdd == '0'" type="danger">不显示</el-tag>
            <el-tag v-if="scope.row.showAdd == '1'" type="success">显示</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="删除按钮" prop="showDelete" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-tag v-if="scope.row.showDelete == '0'" type="danger">不显示</el-tag>
            <el-tag v-if="scope.row.showDelete == '1'" type="success">显示</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="编辑按钮" prop="showUpdate" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-tag v-if="scope.row.showUpdate == '0'" type="danger">不显示</el-tag>
            <el-tag v-if="scope.row.showUpdate == '1'" type="success">显示</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="批量导入按钮" prop="showBatchAdd" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-tag v-if="scope.row.showBatchAdd == '0'" type="danger">不显示</el-tag>
            <el-tag v-if="scope.row.showBatchAdd == '1'" type="success">显示</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="center" label="批量导出按钮" prop="showBatchExport" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-tag v-if="scope.row.showBatchExport == '0'" type="danger">不显示</el-tag>
            <el-tag v-if="scope.row.showBatchExport == '1'" type="success">显示</el-tag>
          </template>
        </el-table-column>

        <el-table-column align="center" label="操作" width="250">
          <template slot-scope="scope">
            <el-button size="mini"
                       type="primary"
                       @click="handleUpdate(scope.$index, scope.row)">
              编辑
            </el-button>
            <el-button size="mini"
                       type="danger"
                       @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
            <el-popover
                :disabled="!scope.row.frontTips"
                placement="top-start"
                title=""
                trigger="hover">
              <div style="width: 200px">
                <div v-if="scope.row.frontTips">
                  <div style="color: red">配置有改动，需重新生成代码</div>
                </div>
              </div>
              <el-badge slot="reference" :value="scope.row.frontTips?'新':''" type="danger">
                <el-button size="mini"
                           type="warning"
                           @click="handleCreatePage(scope.$index, scope.row)">生成页面
                </el-button>
              </el-badge>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-container">
      <el-pagination
          :current-page.sync="listQuery.current"
          :page-size="listQuery.pageSize"
          :page-sizes="[5,10,15]"
          :total="total"
          background
          layout="total, sizes,prev, pager, next,jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange">
      </el-pagination>
    </div>
    <el-dialog v-loading="listLoading" :visible.sync="editDialogVisible"
               title="编辑项目-页面配置"
               width="80%">
      <el-form ref="roleForm"
               :model="projectTablePageConfig"
               label-width="auto" size="small">
        <el-form-item label="项目：">
          <el-select v-model="projectTablePageConfig.projectId" style="width:100%" @change="selectProjectChange">
            <el-option
                v-for="item in allProjectListOption"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数据源：" prop="datasourceId">
          <el-select v-model="projectTablePageConfig.datasourceId" clearable filterable style="width:100%"
                     @change="selectDatasourceChange">
            <el-option
                v-for="item in datasourceOption"
                :key="item.id"
                :label="item.remark"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数据表：">
          <el-select v-model="projectTablePageConfig.tableName" filterable style="width:100%"
                     @change="selectTableNameChange">
            <el-option
                v-for="item in projectTableOption"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="搜索条件字段：">
          <template #label>
              <span>
                搜索条件字段：
                <el-tooltip effect="light" placement="bottom">
                  <template #content>
                    搜索时的查询条件，按照选择的先后顺序排序展示
                  </template>
                  <i class="el-icon-question"/>
                </el-tooltip>
              </span>
          </template>
          <el-select v-model="projectTablePageConfig.searchFieldsArr" clearable filterable multiple style="width:100%"
                     @change="forceUpdateElement">
            <el-option
                v-for="item in searchFieldsOption"
                :key="item.value"
                :disabled="item.disabled"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="展示表字段：">
          <template #label>
              <span>
                展示表字段：
                <el-tooltip effect="light" placement="bottom">
                  <template #content>
                    页面数据表展示的字段，按照选择的先后顺序排序展示
                  </template>
                  <i class="el-icon-question"/>
                </el-tooltip>
              </span>
          </template>
          <el-select v-model="projectTablePageConfig.tableColumnFieldsArr" clearable filterable multiple
                     style="width:100%" @change="forceUpdateElement">
            <el-option
                v-for="item in tableFieldsOption"
                :key="item.value"
                :disabled="item.disabled"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="可新增字段：">
          <template #label>
              <span>
                可新增字段：
                <el-tooltip effect="light" placement="bottom">
                  <template #content>
                    新增时可填写的字段，按照选择的先后顺序排序展示
                  </template>
                  <i class="el-icon-question"/>
                </el-tooltip>
              </span>
          </template>
          <el-select v-model="projectTablePageConfig.addFieldsArr" clearable filterable multiple style="width:100%"
                     @change="forceUpdateElement">
            <el-option
                v-for="item in addOrEditFieldsOption"
                :key="item.value"
                :disabled="item.disabled"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="可修改字段：">
          <template #label>
              <span>
                可修改字段：
                <el-tooltip effect="light" placement="bottom">
                  <template #content>
                    修改时可填写的字段，按照选择的先后顺序排序展示
                  </template>
                  <i class="el-icon-question"/>
                </el-tooltip>
              </span>
          </template>
          <el-select v-model="projectTablePageConfig.updateFieldsArr" clearable filterable multiple style="width:100%"
                     @change="forceUpdateElement">
            <el-option
                v-for="item in addOrEditFieldsOption"
                :key="item.value"
                :disabled="item.disabled"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="增加按钮：">
          <el-select v-model="projectTablePageConfig.showAdd" style="width:100%">
            <el-option label="不显示" value="0"></el-option>
            <el-option label="显示" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="删除按钮：">
          <el-select v-model="projectTablePageConfig.showDelete" style="width:100%">
            <el-option label="不显示" value="0"></el-option>
            <el-option label="显示" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="编辑按钮：">
          <el-select v-model="projectTablePageConfig.showUpdate" style="width:100%">
            <el-option label="不显示" value="0"></el-option>
            <el-option label="显示" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="批量导入按钮：">
          <el-select v-model="projectTablePageConfig.showBatchAdd" style="width:100%">
            <el-option label="不显示" value="0"></el-option>
            <el-option label="显示" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="批量导出按钮：">
          <el-select v-model="projectTablePageConfig.showBatchExport" style="width:100%">
            <el-option label="不显示" value="0"></el-option>
            <el-option label="显示" value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="editDialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="handleEditDialogConfirm()">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog v-loading="listLoading" :visible.sync="addDialogVisible"
               title="新增项目-页面配置"
               width="80%">
      <el-form ref="roleForm"
               :model="projectTablePageConfig"
               label-width="auto" size="small">
        <el-form-item label="项目：">
          <el-select v-model="projectTablePageConfig.projectId" style="width:100%" @change="selectProjectChange">
            <el-option
                v-for="item in allProjectListOption"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数据源：" prop="datasourceId">
          <el-select v-model="projectTablePageConfig.datasourceId" clearable filterable style="width:100%"
                     @change="selectDatasourceChange">
            <el-option
                v-for="item in datasourceOption"
                :key="item.id"
                :label="item.remark"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数据表：">
          <el-select v-model="projectTablePageConfig.tableName" filterable style="width:100%"
                     @change="selectTableNameChange">
            <el-option
                v-for="item in projectTableOption"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="搜索条件字段：">
          <template #label>
              <span>
                搜索条件字段：
                <el-tooltip effect="light" placement="bottom">
                  <template #content>
                    搜索时的查询条件，按照选择的先后顺序排序展示
                  </template>
                  <i class="el-icon-question"/>
                </el-tooltip>
              </span>
          </template>
          <el-select v-model="projectTablePageConfig.searchFieldsArr" clearable filterable multiple style="width:100%"
                     @change="forceUpdateElement">
            <el-option
                v-for="item in searchFieldsOption"
                :key="item.value"
                :disabled="item.disabled"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="展示表字段：">
          <template #label>
              <span>
                展示表字段：
                <el-tooltip effect="light" placement="bottom">
                  <template #content>
                    页面数据表展示的字段，按照选择的先后顺序排序展示
                  </template>
                  <i class="el-icon-question"/>
                </el-tooltip>
              </span>
          </template>
          <el-select v-model="projectTablePageConfig.tableColumnFieldsArr" clearable filterable multiple
                     style="width:100%" @change="forceUpdateElement">
            <el-option
                v-for="item in tableFieldsOption"
                :key="item.value"
                :disabled="item.disabled"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="可新增字段：">
          <template #label>
              <span>
                可新增字段：
                <el-tooltip effect="light" placement="bottom">
                  <template #content>
                    新增时可填写的字段，按照选择的先后顺序排序展示
                  </template>
                  <i class="el-icon-question"/>
                </el-tooltip>
              </span>
          </template>
          <el-select v-model="projectTablePageConfig.addFieldsArr" clearable filterable multiple style="width:100%"
                     @change="forceUpdateElement">
            <el-option
                v-for="item in addOrEditFieldsOption"
                :key="item.value"
                :disabled="item.disabled"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="可修改字段：">
          <template #label>
              <span>
                可修改字段：
                <el-tooltip effect="light" placement="bottom">
                  <template #content>
                    修改时可填写的字段，按照选择的先后顺序排序展示
                  </template>
                  <i class="el-icon-question"/>
                </el-tooltip>
              </span>
          </template>
          <el-select v-model="projectTablePageConfig.updateFieldsArr" clearable filterable multiple style="width:100%"
                     @change="forceUpdateElement">
            <el-option
                v-for="item in addOrEditFieldsOption"
                :key="item.value"
                :disabled="item.disabled"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="增加按钮：">
          <el-select v-model="projectTablePageConfig.showAdd" style="width:100%">
            <el-option label="不显示" value="0"></el-option>
            <el-option label="显示" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="删除按钮：">
          <el-select v-model="projectTablePageConfig.showDelete" style="width:100%">
            <el-option label="不显示" value="0"></el-option>
            <el-option label="显示" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="编辑按钮：">
          <el-select v-model="projectTablePageConfig.showUpdate" style="width:100%">
            <el-option label="不显示" value="0"></el-option>
            <el-option label="显示" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="批量导入按钮：">
          <el-select v-model="projectTablePageConfig.showBatchAdd" style="width:100%">
            <el-option label="不显示" value="0"></el-option>
            <el-option label="显示" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="批量导出按钮：">
          <el-select v-model="projectTablePageConfig.showBatchExport" style="width:100%">
            <el-option label="不显示" value="0"></el-option>
            <el-option label="显示" value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="addDialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="handleAddDialogConfirm()">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
import {projectTablePageConfigPostRequire} from '@/api/projectTablePageConfig'
import {tablePostRequire} from '@/api/tableConfig'
import {projectPostRequire} from '@/api/project'

const defaultListQuery = {
  current: 1,
  pageSize: 10,
  projectId: undefined,
  datasourceId: undefined,
  tableName: undefined,

}
const defaultProjectTablePageConfig = {
  id: undefined,
  projectId: undefined,
  datasourceId: undefined,
  tableName: undefined,
  searchFields: undefined,
  searchFieldsArr: [],
  tableColumnFields: undefined,
  tableColumnFieldsArr: [],
  addFields: undefined,
  addFieldsArr: [],
  updateFields: undefined,
  updateFieldsArr: [],
  showAdd: '1',
  showBatchAdd: '0',
  showBatchExport: '0',
  showDelete: '1',
  showUpdate: '1',

}
export default {
  name: 'projectTablePageConfigList',
  data() {
    return {
      listQuery: this.$deepClone(defaultListQuery),
      list: null,
      total: null,
      listLoading: false,
      addDialogVisible: false,
      editDialogVisible: false,
      projectTablePageConfig: this.$deepClone(defaultProjectTablePageConfig),
      allProjectJSON: {},
      allProjectListOption: [],
      projectTableFieldOption: {},
      projectTableOption: [],
      banFieldPositionMap: {},
      searchFieldsOption: [],
      tableFieldsOption: [],
      addOrEditFieldsOption: [],
      datasourceOption: [],
    }
  },
  created() {
    let currentProject = JSON.parse((localStorage.getItem('currentProject') || "{}"))
    if (currentProject && !this.listQuery.projectId && currentProject.id != null) {
      this.listQuery.projectId = currentProject.id;
    }
    this.getProjectList(() => {
      this.projectChangeThenInitDatasourceOption()
      this.getList()
    })
  },
  methods: {
    projectChangeThenInitDatasourceOption(projectId) {
      this.listQuery.datasourceId = null
      if (projectId == null) {
        projectId = this.listQuery.projectId
      }
      if (projectId == null) {
        return false;
      }

      let projectJsonElement = this.allProjectJSON[projectId];
      let projectDatasource = projectJsonElement.projectDatasource;
      let mutilDatasourceList = projectJsonElement.mutilDatasourceList;
      let datasourceOption = [projectDatasource]
      if (mutilDatasourceList && mutilDatasourceList.length > 0) {
        datasourceOption.push(...mutilDatasourceList)
      } else {
        this.listQuery.datasourceId = projectDatasource.id
        this.projectTablePageConfig.datasourceId = projectDatasource.id
        this.selectDatasourceChange(projectDatasource.id)
      }
      this.datasourceOption = datasourceOption

    },
    handleResetSearch() {
      this.listQuery = this.$deepClone(defaultListQuery)
    },
    handleSearchList() {
      this.listQuery.current = 1
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.current = 1
      this.listQuery.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.current = val
      this.getList()
    },
    handleAdd() {
      this.addDialogVisible = true
      this.projectTablePageConfig = this.$deepClone(defaultProjectTablePageConfig)
      let currentProject = JSON.parse((localStorage.getItem('currentProject') || "{}"))
      if (currentProject && currentProject.id != null) {
        this.projectTablePageConfig.projectId = currentProject.id;
        this.selectProjectChange(currentProject.id)
      }
    },
    handleDelete(index, row) {
      this.$confirm('是否要删除该项目-页面配置?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        projectTablePageConfigPostRequire('delete', {'id': row.id}).then(response => {
          if (response) {
            this.$message({
              message: response.message,
              type: response.status ? 'success' : 'error'
            })
          }
        }).finally(() => {
          this.getList()
        })
      })
    },
    handleCreatePage(index, row) {
      this.$confirm('是否重新生成页面?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        projectTablePageConfigPostRequire('createPage', {
          tableName: row.tableName,
          projectId: row.projectId,
          datasourceId: row.datasourceId
        }).then(response => {
          if (response) {
            this.$message({
              message: response.message,
              type: response.status ? 'success' : 'error'
            })
          }
        }).finally(() => {
          this.getList()
        })
      })
    },
    handleUpdate(index, row) {
      let datasourceId = row.datasourceId
      this.editDialogVisible = true
      this.projectTablePageConfig = this.$deepClone(row)
      this.initTableOptionByDatasourceId(datasourceId, () => {
        this.checkFieldPosition()
      })
      this.$forceUpdate()
    },
    handleEditDialogConfirm() {
      projectTablePageConfigPostRequire('update', this.projectTablePageConfig).then(response => {
        if (response) {
          this.$message({
            message: response.message,
            type: response.status ? 'success' : 'error'
          })
        }
        this.editDialogVisible = false
      }).finally(() => {
        this.getList()
      })
    },
    handleAddDialogConfirm() {
      projectTablePageConfigPostRequire('add', this.projectTablePageConfig).then(response => {
        if (response) {
          this.$message({
            message: response.message,
            type: response.status ? 'success' : 'error'
          })
        }
        this.addDialogVisible = false
      }).finally(() => {
        this.getList()
      })
    },
    getList() {
      this.listLoading = true
      projectTablePageConfigPostRequire('listPage', this.listQuery).then(response => {
        this.listLoading = false
        let listArr = response.data.records || []
        let projectConfigChangeArr = response.projectConfigRecord || []
        if (projectConfigChangeArr.length > 0) {
          let idToProjectConfig = {}
          for (let i = 0; i < projectConfigChangeArr.length; i++) {
            let temp = projectConfigChangeArr[i]
            idToProjectConfig[temp.projectId] = temp

          }
          for (let i = 0; i < listArr.length; i++) {
            const item = listArr[i]
            let frontTips = ''
            let tableName = item.projectDatasource.mysqlDatabaseName + "." + item.tableName
            if (item.projectId in idToProjectConfig) {
              let currentProjectConfig = idToProjectConfig[item.projectId]
              let frontRebuildTablesArr = (currentProjectConfig.frontRebuildTables || "").split(",") || []
              if (frontRebuildTablesArr.indexOf(tableName) != -1) {
                frontTips = "1"
              }
            }
            item.frontTips = frontTips
          }
        }
        this.list = listArr
        this.total = response.data.total
      })
    },
    getProjectList(resolveFn) {
      this.listLoading = true
      projectPostRequire("getAllProjectOption").then(response => {
        this.allProjectListOption = response.data || [];
        if (this.allProjectListOption.length > 0) {
          this.allProjectListOption.forEach(item => {
            this.allProjectJSON[item.id] = item;
          })
          if (resolveFn) {
            resolveFn()
          }
        }
      }).finally(() => {
        this.listLoading = false;
      })
    },
    forceUpdateElement() {
      this.$forceUpdate()
    },
    selectTableNameChange() {
      this.projectTablePageConfig.searchFieldsArr = []
      this.projectTablePageConfig.tableColumnFieldsArr = []
      this.projectTablePageConfig.addFieldsArr = []
      this.projectTablePageConfig.updateFieldsArr = []
      this.$forceUpdate()
      this.checkFieldPosition()
    },
    selectProjectChange(projectId) {
      if (projectId == null) {
        projectId = this.projectTablePageConfig.projectId
      }
      this.projectChangeThenInitDatasourceOption(projectId)
    },
    selectDatasourceChange(datasourceId) {
      this.projectTablePageConfig.tableName = undefined
      this.initTableOptionByDatasourceId(datasourceId, () => {
        this.selectTableNameChange()
      })
    },
    checkFieldPosition() {
      /**
       * 每个字段允许出现的位置
       * 判断方法：
       * 1、该字段配置过 字段映射，如配置映射成 图片类型
       * 2、该项目使用了某个模板 如 模板A
       * 3、该模板配置了模板-控件类型-允许出现的位置 如：模板A-图片类型-不允许出现在搜索框中
       */
      let projectId = this.projectTablePageConfig.projectId;
      let tableName = this.projectTablePageConfig.tableName;
      let datasourceId = this.projectTablePageConfig.datasourceId
      this.banFieldPositionMap = {}

      let allTableFieldListOptionElement = this.projectTableFieldOption[this.projectTablePageConfig.tableName];
      this.searchFieldsOption = this.$deepClone(allTableFieldListOptionElement)
      this.tableFieldsOption = this.$deepClone(allTableFieldListOptionElement)
      this.addOrEditFieldsOption = this.$deepClone(allTableFieldListOptionElement)
      if (projectId && tableName) {
        this.listLoading = true
        projectTablePageConfigPostRequire('checkFieldPosition',
            {projectId: projectId, datasourceId: datasourceId, tableName: tableName}).then(response => {
          this.banFieldPositionMap = response.data || {}
          let searchFieldsOptionLimit = this.banFieldPositionMap["1"] || []
          let tableFieldsOptionLimit = this.banFieldPositionMap["2"] || []
          let addEditFieldsOptionLimit = this.banFieldPositionMap["3"] || []
          if (searchFieldsOptionLimit && searchFieldsOptionLimit.length > 0) {
            let temp = this.searchFieldsOption
            this.searchFieldsOption = []
            for (let i = 0; i < temp.length; i++) {
              let item = temp[i]
              let disabled = false
              if (searchFieldsOptionLimit.indexOf(item.value) != -1) {
                disabled = true
              }
              this.searchFieldsOption.push({label: item.label, value: item.value, disabled: disabled})
            }
          }
          if (tableFieldsOptionLimit && tableFieldsOptionLimit.length > 0) {
            let temp = this.tableFieldsOption
            this.tableFieldsOption = []
            for (let i = 0; i < temp.length; i++) {
              let item = temp[i]
              let disabled = false
              if (tableFieldsOptionLimit.indexOf(item.value) != -1) {
                disabled = true
              }
              this.tableFieldsOption.push({label: item.label, value: item.value, disabled: disabled})
            }
          }
          if (addEditFieldsOptionLimit && addEditFieldsOptionLimit.length > 0) {
            let temp = this.addOrEditFieldsOption
            this.addOrEditFieldsOption = []
            for (let i = 0; i < temp.length; i++) {
              let item = temp[i]
              let disabled = false
              if (addEditFieldsOptionLimit.indexOf(item.value) != -1) {
                disabled = true
              }
              this.addOrEditFieldsOption.push({label: item.label, value: item.value, disabled: disabled})
            }
          }
          this.listLoading = false
        })
      }
    },
    initTableOptionByDatasourceId(datasourceId, resolveFn) {
      let associationTableField = []
      this.associationTableField = []
      this.listLoading = true
      this.projectTableOption = []
      this.projectTableFieldOption = {}
      let projectTableOption = []
      let projectTableFieldOption = {}
      tablePostRequire('listAllByDatasourceId', {datasourceId: datasourceId}).then(response => {
        let tableInfos = response.data || []
        new Promise((resolve, reject) => {
          for (let i = 0; i < tableInfos.length; i++) {
            let ti = tableInfos[i]
            let label = ti.tableName + " - " + ti.tableComment
            projectTableOption.push({
              label: label,
              value: ti.tableName
            })
            let fieldNames = ti.fieldNames || []
            let tableToField = []

            let associationElement = {label: label, value: ti.tableName}
            let associationElementChildren = []
            fieldNames.forEach(fn => {
              associationElementChildren.push({label: fn.name + " - " + fn.desc, value: fn.name})
              tableToField.push({
                label: fn.name + " - " + fn.desc,
                value: fn.name,
                type: fn.type,
                javaType: fn.javaType
              })
            })
            projectTableFieldOption[ti.tableName] = tableToField
            associationElement.children = associationElementChildren
            associationTableField.push(associationElement)

            if (i === (tableInfos.length - 1)) {
              this.associationTableField = associationTableField
              this.projectTableOption = projectTableOption
              this.projectTableFieldOption = projectTableFieldOption
              resolve()
            }
          }
        }).then(() => {
          if (resolveFn) {
            resolveFn()
          }
        })
      }).catch(error => {
        reject(error)
      }).finally(() => {
        this.listLoading = false
      })
    },
  }
}
</script>
<style>
.el-badge__content.is-fixed {
  -webkit-transform: translateY(0%) translateX(100%) !important;
}

.demo-table-expand label {
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-left: 10px;
  width: 100%;
}
</style>
